<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap-icons.css" />
    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap.css" />

    <link rel="stylesheet" href="../swiper8/swiper-bundle.min.css">
    <script src="../swiper8/swiper-bundle.min.js"></script>

    <script src="../cssjs/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <title></title>

</head>

<body>
    <div class="conrainer">
        <div class="row">
            <div class="col col-xl-12">
                <div class="row">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/01.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/02.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/03.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/04.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                        </div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <script>
        var mySwiper = new Swiper('.swiper', {
            slidesPerView: 4,

            loop: true, // 循环模式选项



            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },



            // effect: 'coverflow',
            // slidesPerView: 3,
            // centeredSlides: true,



            autoplay: {
                delay: 2000,//1秒切换一次
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
            },


        })

    </script>
</body>

</html>